<template>
	<div class="app-container">
		<el-form
			:model="queryParams"
			ref="queryRef"
			v-show="showSearch"
			:inline="true"
		>
			<el-form-item label="区域号" prop="areaNo">
				<el-input
					@keyup.enter="handleQuery"
					v-model="queryParams.areaNo"
					placeholder="请输入"
					clearable
					style="width: 200px"
				/>
			</el-form-item>

			<el-form-item label="层号" prop="layerNo">
				<el-input
					@keyup.enter="handleQuery"
					v-model="queryParams.layerNo"
					placeholder="请输入"
					clearable
					style="width: 200px"
				/>
			</el-form-item>
			<el-form-item label="货架编码" prop="num">
				<el-input
					@keyup.enter="handleQuery"
					v-model="queryParams.num"
					placeholder="请输入"
					clearable
					style="width: 200px"
				/>
			</el-form-item>
			<el-form-item label="货架号		" prop="shelfNo">
				<el-input
					@keyup.enter="handleQuery"
					v-model="queryParams.shelfNo"
					placeholder="请输入"
					clearable
					style="width: 200px"
				/>
			</el-form-item>
			<!-- <el-form-item label="是否存满" prop="status">
				<el-input
					v-model="queryParams.status"
					placeholder="请输入"
					clearable
          style="width: 360px;"
				/>
			</el-form-item> -->

			<el-form-item>
				<el-button type="primary" icon="Search" @click="handleQuery"
					>搜索</el-button
				>
				<el-button icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					type="primary"
					plain
					icon="Plus"
					@click="handleAdd"
					v-hasPermi="['erp:skesWarehouseLocation:add']"
					>新增</el-button
				>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="Download"
					@click="handleExport"
					v-hasPermi="['erp:skesWarehouseLocation:export']"
					>导出</el-button
				>
			</el-col>
			<right-toolbar
				v-model:showSearch="showSearch"
				@queryTable="getList"
			></right-toolbar>
		</el-row>
		<el-table
			v-loading="loading"
			height="55vh"
			:data="dataList"
			@selection-change="handleSelectionChange"
		>
			<!-- <el-table-column type="selection" width="55" align="center" /> -->

			<el-table-column prop="areaNo" label="区域号" align="center" />

			<el-table-column
				prop="layerNo"
				label="层号"
				width=""
				align="center"
			/>
			<el-table-column
				prop="num"
				label="货架编码"
				width=""
				align="center"
			/>
			<el-table-column
				prop="shelfNo"
				label="货架号"
				width=""
				align="center"
			/>
			<el-table-column
				prop="shelfStatus"
				label="库位类型"
				width=""
				align="center"
			>
				<template #="{ row }">
					<dict-tag
						v-if="row.shelfStatus"
						:options="location_status"
						:value="row.shelfStatus"
					/>
				</template>
			</el-table-column>
			<el-table-column
				prop="status"
				label="是否存满"
				width=""
				align="center"
			>
				<template #="{ row }">{{
					row.status === 1 ? "是" : "否"
				}}</template>
			</el-table-column>
			<el-table-column
				prop="storageQty"
				label="已存放的数量"
				width=""
				align="center"
			/>
			<el-table-column
				prop="sumQty"
				label="可存放的数量"
				width=""
				align="center"
			/>
			<el-table-column
				label="操作"
				align="center"
				width="80"
				fixed="right"
				class-name="small-padding fixed-width"
			>
				<template #default="scope">
					<el-tooltip content="修改" placement="top">
						<el-button
							link
							type="primary"
							icon="Edit"
							@click="handleUpdate(scope.row)"
							v-hasPermi="['erp:skesWarehouseLocation:edit']"
						></el-button>
					</el-tooltip>
					<el-tooltip content="删除" placement="top">
						<el-button
							link
							type="primary"
							icon="Delete"
							@click="handleDelete(scope.row)"
							v-hasPermi="['erp:skesWarehouseLocation:remove']"
						></el-button>
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>

		<add
			v-model:visible="addParams.visible"
			:params="addParams"
			@refresh="getList"
		/>
	</div>
</template>
<script setup name="Storage">
import {
	getWarehouseLocationList as listTable,
	exportWarehouseLocation as dowloadErrorExcel,
	delWarehouseLocationById,
} from "@/api/skesWarehouseLocation"
import { optionSelect } from "@/api/system/skesItem"
import { getToken } from "@/utils/auth"
import { userOptionSelect } from "@/api/system/user"
import Add from "./add.vue"

const { proxy } = getCurrentInstance()
const dataList = ref([])
const summaryInfo = ref({})
const selectionData = ref([])
const total = ref(0)
const loading = ref(true)
const showSearch = ref(true)

const stockOutTime = ref([])
const mPaymentTime = ref([])
const cPaymentTime = ref([])
const recycleTime = ref([])
const warehouseEntryTime = ref([])
const salesTime = ref([])
const maintenanceTime = ref([])
const { location_status } = proxy.useDict("location_status")
const { payment_status } = proxy.useDict("payment_status")
const { item_brand } = proxy.useDict("item_brand")
const { goods_category } = proxy.useDict("goods_category")

const data = reactive({
	queryParams: {
		pageNum: 1,
		pageSize: 10,
	},
})

const addParams = ref({})
const { queryParams, form, rules } = toRefs(data)
const shortcuts = [
	{
		text: "最近一周",
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
			return [start, end]
		},
	},
	{
		text: "最近一个月",
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
			return [start, end]
		},
	},
	{
		text: "最近三个月",
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
			return [start, end]
		},
	},
]
/** 商品下拉框 */
const remoteLoading = ref(false)
const itemOptions = ref([])
async function getItemOption(query) {
	if (query) {
		remoteLoading.value = true
		const { data } = await optionSelect({ queryKey: query })
		itemOptions.value = data.map((i) => {
			const { id, brand, ref: re, recyclePrice, model, expressNo } = i
			return {
				value: i.id,
				label: `${id},${brand},${re},${recyclePrice},${model},${
					expressNo || ""
				}`,
				recyclePrice: i.recyclePrice,
			}
		})
		remoteLoading.value = false
	}
}
getItemOption(" ")
/** 用户下拉框 */
const userLoading = ref(false)
const userOptions = ref([])
async function getUserOption(query) {
	if (query) {
		userLoading.value = true
		const { data } = await userOptionSelect({ queryKey: query })
		userOptions.value = data.map((i) => {
			const { userId, nickName, userName } = i
			return {
				value: userId,
				label: `${userId},${nickName},${userName}`,
			}
		})
		userLoading.value = false
	}
}
getUserOption(" ")

/*** 导入参数 */
const upload = reactive({
	// 是否显示弹出层（用户导入）
	open: false,
	// 弹出层标题（用户导入）
	title: "",
	// 是否禁用上传
	isUploading: false,

	// 设置上传的请求头部
	headers: { Authorization: "Bearer " + getToken() },
	// 上传的地址
	url: import.meta.env.VITE_APP_BASE_API + "/stock/stockManager/importData",
})
/** 导入按钮操作 */
function handleImport() {
	upload.title = "用户导入"
	upload.open = true
}
/** 下载模板操作 */
function importTemplate() {
	proxy.download(
		"/stock/stockManager/importTemplate",
		{},
		`商品库存信息.xlsx`
	)
}
/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
	upload.isUploading = true
}
/** 文件上传成功处理 */
const handleFileSuccess = async (response, file, fileList) => {
	upload.open = false
	upload.isUploading = false
	proxy.$refs["uploadRef"].handleRemove(file)
	proxy.$alert(
		"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
			response.msg +
			"</div>",
		"导入结果",
		{ dangerouslyUseHTMLString: true }
	)
	if (response.code === 500) {
		proxy.download(
			"stock/stockManager/dowloadErrorExcel/" + response.data,
			{},
			`导入失败数据.xlsx`
		)
	}
	getList()
}
/** 提交上传文件 */
function submitFileForm() {
	proxy.$refs["uploadRef"].submit()
}
/** 查询列表 */
function getList() {
	loading.value = true
	const [beginStockOutTime, endStockOutTime] = stockOutTime.value
	const [beginMPaymentTime, endMPaymentTime] = mPaymentTime.value
	const [beginCPaymentTime, endCPaymentTime] = cPaymentTime.value
	const [beginRecycleTime, endRecycleTime] = recycleTime.value
	const [beginWarehouseEntryTime, endWarehouseEntryTime] =
		warehouseEntryTime.value
	const [beginSalesTime, endSalesTime] = salesTime.value
	const [beginMaintenanceTime, endMaintenanceTime] = maintenanceTime.value
	const params = {
		beginStockOutTime,
		endStockOutTime,
		beginMPaymentTime,
		endMPaymentTime,
		beginCPaymentTime,
		endCPaymentTime,
		beginRecycleTime,
		endRecycleTime,
		beginWarehouseEntryTime,
		endWarehouseEntryTime,
		beginSalesTime,
		endSalesTime,
		beginMaintenanceTime,
		endMaintenanceTime,
	}
	listTable({ ...queryParams.value, params }).then((response) => {
		dataList.value = response.rows
		summaryInfo.value = { ...response, rows: undefined }
		total.value = response.total
		loading.value = false
	})
}
/** 搜索按钮操作 */
function handleQuery() {
	queryParams.pageNum = 1
	getList()
}
/** 重置按钮操作 */
function resetQuery() {
	proxy.resetForm("queryRef")
	handleQuery()
}
function handleAdd() {
	addParams.value = {
		type: "add",
		visible: true,
	}
}

function handleUpdate(row) {
	addParams.value = {
		type: "edit",
		visible: true,
		id: row.id,
	}
}

function handleDelete(row) {
	proxy.$modal
		.confirm("是否确认删除吗?")
		.then(function () {
			return delWarehouseLocationById(row.id)
		})
		.then(() => {
			getList()
			proxy.$modal.msgSuccess("删除成功")
		})
		.catch(() => {})
}
/** 导出按钮操作 */
function handleExport() {
	proxy.download(
		"/skesWarehouseLocation/export",
		{
			...queryParams.value,
		},
		`库位_${new Date().getTime()}.xlsx`
	)
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {}
getList()
</script>
